<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a.tooltip {
            outline: none;
            text-decoration: none;
            border-bottom: dotted 1px blue;
            position: relative;
        }

        a.tooltip strong {
            line-height: 30px;
        }

        a.tooltip>span {
            width: 300px;
            padding: 10px 20px;
            margin-top: 0;
            margin-left: -120px;
            opacity: 0;
            visibility: hidden;
            z-index: 10;
            position: absolute;
            font-family: Arial;
            font-size: 12px;
            font-style: normal;
            border-radius: 3px;
            box-shadow: 2px 2px 2px #999;
            transition-property: opacity, margin-top, visibility, margin-left;
            transition-duration: 0.4s, 0.3s, 0.4s, 0.3s;
            transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
        }

        /*a.tooltip > span:hover,*/

        a.tooltip:hover>span {
            opacity: 1;
            text-decoration: none;
            visibility: visible;
            overflow: visible;
            margin-top: 50px;
            display: inline;
            margin-left: -90px;
        }

        a.tooltip span b {
            width: 15px;
            height: 15px;
            margin-left: 40px;
            margin-top: -19px;
            display: block;
            position: absolute;
            transform: rotate(-45deg);
            box-shadow: inset 0 1px 0 #fff;
            display: none;
        }

        a.tooltip>span {
            color: #000000;
            background: #FBF5E6;
            background: -webkit-linear-gradient(top, #FBF5E6, #FFFFFF);
            background: linear-gradient(top, #FBF5E6, #FFFFFF);
            border: 1px solid #CFB57C;
        }

        a.tooltip span b {
            background: #FBF5E6;
            border-top: 1px solid #CFB57C;
            border-right: 1px solid #CFB57C;
        }
    </style>
</head>

<body>
    <a href="#" class="tooltip">
        Soeslm Ojlsss — the content of the link that will trigger the tooltip box
        <span> — start of the tooltip box
            <b></b> — the callout triangle Sojlsfoi soiolislie — the content of the tooltip
        </span> — end of the tooltip
    </a>

</body>

</html>